<template>
	<div class="jumbotron">
		<form class="form-horizontal" role="form" @submit.prevent="fillEnterpriseInfo">
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<h1>完善企业信息</h1>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-8">
					<label for="entName">企业名称</label>
					<input type="text" class="form-control" id="entName" placeholder="请输入企业名称(必填)" v-model="info.entName">
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-8">
					<label for="entRegion">企业所在地区</label>
					<p>
						<span>城市索引（按首字母排序）：</span>
						<select v-model="cityFirst">
							<option v-for="city in cityList">
								{{city.title}}
							</option>
						</select></p>
					<p>
						<span>请选择企业所在地区（必填）：</span>
						<select v-model="info.region">
							<option v-for="zy in selection">
								{{zy}}
							</option>
						</select>
					</p>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-8">
					<label for="information">企业简介</label>
					<input type="text" class="form-control" id="information" placeholder="请输入企业简介(必填)" v-model="info.information">
				</div>
			</div>
			<!-- <input type="hidden" v-model="info.holderId" /> -->
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-8">
					<button type="submit" class="btn btn-success btn-lg">确定</button>
				</div>
			</div>
		</form>
	</div>
</template>

<script>
	module.exports = {
		data: function() {
			return {
				userID: '',
				info: {
					entName: '',
					region: '',
					information: '',
					holderId: ''
				},
				cityList: {

				},
				cityFirst: '',

			}
		},
		mounted() {
			$.ajax({
				url: "json/city.json",
				type: 'get',
				dataType: 'json',
				headers: {
					"Content-Type": "application/json",
				},
				success: (data) => {
					this.cityList = data.city;
				},
				error: (err) => {
					console.log("网络异常！")
				}
			});
		},
		computed: {
			selection: function() {
				for (let i = 0; i < this.cityList.length; i++) {
					if (this.cityList[i].title === this.cityFirst) {
						return this.cityList[i].lists;
					}
				}
			}
		},
		methods: {
			fillEnterpriseInfo: function() {
				if (this.info.entName.trim() === "" || this.info.entName.trim() === null || this.info.entName.trim() ===
					undefined) {
					alert("请输入企业名称！");
					return false;
				}
				if (this.info.region.trim() === "" || this.info.region.trim() === null || this.info.region
					.trim() === undefined) {
					alert("请选择企业所在地区！");
					return false;
				}
				if (this.info.information.trim() === "" || this.info.information.trim() === null || this.info.information
					.trim() === undefined) {
					alert("请输入企业简介！");
					return false;
				}
				this.info.holderId = JSON.parse(localStorage.getItem('sysUser')).id;
				$.ajax({
					url: conf.ur + "/api/enterprise/fillEnterpriseInfo",
					type: 'post',
					dataType: 'json',
					data: JSON.stringify(this.info),
					headers: {
						"Content-Type": "application/json",
						"x-auth-token": window.localStorage.getItem('x-auth-token')
					},
					success: (data) => {
						if (data.code === 0) {
							alert("完善成功！");
							window.location.reload();
						} else {
							alert("完善失败！")
							console.log(JSON.stringify(data))
						}
					},
					error: (err) => {
						console.log("网络异常！")
					}
				});
				return false;
			}
		}
	}
</script>

<style scoped>
	.jumbotron {
		background-color: ghostwhite;
	}
</style>
